// 创建有状态组件（类组件）

// 改造时钟案例

// 1. 创建一个名称扩展为 React.Component 的ES6 类

// 2. 创建一个叫做render()的空方法

// 3. 将函数体移动到 render() 方法中

// 4. 在 render() 方法中，使用 this.props 替换 props

// 5. 删除剩余的空函数声明

// 6. 为当前组件添加一个局部状态

// 7. 将this.props换成this.state

// 8. 给组件添加生命周期

// 9. 编写一个tick的函数,里面设定定时器,并且更新时间

// 10. 在componentDidMount中调用tick函数

// 11. 在componentWillUnmount这个钩子中卸载定时器
import React from "react"
// 约束props和state
interface Iprops{
    [k:string]:any
}
interface Istate{
    date:Date
}
// 限制类
interface Iclock{
    tick:()=>void
}
class ColckB extends React.Component<Iprops,Istate> {
    // 声明属性
    interval:any;
    constructor(props:any) {
        super(props)
        this.state = {
            // 声明状态
            date: new Date()
        }
    }
    tick() {
        this.interval= setInterval(() => {
            // 变更状态要调用setState
            this.setState({
                date: new Date()
            })
        }, 1000)
    }
    // 组件挂载完毕
    componentDidMount() {
        this.tick()
    }
    // 组件即将卸载
    componentWillUnmount() {
        clearInterval(this.interval)
    }
    render() {
        return (
            <fieldset>
                <legend>ColckA</legend>
                <h1>hello word !!!</h1>
                {/* react只会更新必要的部分 */}
                <h2>Is now {this.state.date.toLocaleTimeString()}</h2>
            </fieldset>
        )
    }
}
export default ColckB